function debug(data) {
    if (typeof data == 'object') {
        alert(JSON.stringify(data));
    } else {
        alert(data);
    }
}

var app_li = {
    show: function(selector, start, end) {
        $(selector).find("li:lt(" + (start) + ")").hide();
        $(selector).find("li:gt(" + (start - 1) + ")").fadeIn();
        $(selector).find("li:gt(" + (end - 1) + ")").hide();
    },
    hide: function(selector, start, end) {
        $(selector).find("li:lt(" + (start) + ")").show();
        $(selector).find("li:gt(" + (start - 1) + ")").fadeOut();
        $(selector).find("li:gt(" + (end - 1) + ")").show();
    },
    total: function(selector) {
        return $(selector + " li").size();
    },
    createNode: function(selector) {
        if (app_li.total(selector) <= 1) {
            return "";
        } else {

        }
    },
    createList: function() {//type, total, attr, value
        var str = "";
        var count = arguments.length;
        var type_template = [{id: 'ul', child: 'li'}, {id: 'tr', child: 'td'}, {id: 'dl', child: 'dt'}]
        if (count == 4) {
            var type = arguments[0];
            var total = arguments[1];
            var attr = arguments[2];
            var value = arguments[3];
        } else if (count == 3) {
            var type = arguments[0];
            var total = arguments[1];
            var attr = arguments[2];
        } else if (count == 2) {
            var type = arguments[0];
            var total = arguments[1];
        } else if (count == 1) {
            var type = arguments[0];
        } else {
            return null
        }
        if (total < 1) {
            return null
        } else {
            if (app_object.objectFindByKey(type_template, 'id', type)) {
                var child = 'li';
                var attr_str = ""
                if (attr) {
                    attr_str = app_atr.attrToString(attr);
                }
                str = '<' + type + ' ' + attr_str + ' >';
                for (var i = 0; i < total; i++) {
                    value_str = "";
                    if (value) {
                        var value_str = value[i];
                    }
                    str += '<' + child + '>' + value_str + '</' + child + '>';
                }
                str += '</' + type + '>';
                return str;
            }
        }

    }
};

var sliderload = {
    number_show: 1,
    pos: 7,
    selector: 'ul.slider_style',
    selector_out: '.slider-content',
    load: function() {
        var total = Math.floor(app_li.total(sliderload.selector) / sliderload.number_show);
        var str = app_li.createList('ul', total, {class: 'list_click', id: 'list_click'});
        app_li.show(sliderload.selector, 1, 2);
        $(sliderload.selector_out).append(str);
        app_pos.moveBc(sliderload.selector_out, "ul.list_click");
    },
    loadMore: function() {

    }
};

var app_atr = {
    attrToString: function(attr) {
        var attr = attr || {};
        var attr_str = "";
        var attr_arr = [];
        for (x in attr) {
            attr_arr.push(x + "=" + "'" + attr[x] + "'");
        }
        attr_str = attr_arr.join(" ");
        return attr_str;
    },
    stringToAttr: function() {

    }
};

var app_object = {
    objectFindByKey: function(array, key, value) {
        //var array = [{'id': '73', 'foo': 'bar'}, {'id': '45', 'foo': 'bar'}];
        //var result_obj = objectFindByKey(array, 'id', '45');
        for (var i = 0; i < array.length; i++) {
            if (array[i][key] === value) {
                return array[i];
            }
        }
        return null;
    },
    objectFindByValue: function(array, value) {

    }
};
var app_arr = {
    inArrayByValue: function(array, value) {
        if ($.inArray(value, array)) {
            return 1;
        } else {
            return 0;
        }
    }
};

var app_pos = {
    width: '',
    height: '',
    innerWidth: '',
    innerHeight: '',
    setWidth: function(ss) {
        app_pos.width = $(selector).width();
    },
    setHeight: function(ss) {
        app_pos.height = $(ss).height();
    },
    setInnerWidth: function(ss) {
        app_pos.innerWidth = $(ss).width();
    },
    setInnerHeight: function(ss) {
        app_pos.innerHeight = $(ss).height();
    },
    moveTl: function(ss, sd) {
        var y = 0;
        var x = 0;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveTc: function(ss, sd) {
        var width = Math.floor($(sd).width() / 2);
        var mid = Math.floor($(ss).width() / 2);
        var y = 0;
        var x = mid - width;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveTr: function(ss, sd) {
        var width = Math.floor($(sd).width());
        var mid = Math.floor($(ss).width());
        var y = 0;
        var x = mid - width;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveBl: function(ss, sd) {
        var height = Math.floor($(sd).height());
        var mid = Math.floor($(ss).height());
        var x = 0;
        var y = mid - height;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveBc: function(ss, sd) {
        var height = Math.floor($(sd).height());
        var width = Math.floor($(sd).width() / 2);
        var midy = Math.floor($(ss).height());
        var midx = Math.floor($(ss).width() / 2);
        var x = midx - width;
        var y = midy - height;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveBr: function(ss, sd) {
        var width = Math.floor($(sd).width());
        var height = Math.floor($(sd).height() / 2);
        var mid = Math.floor($(ss).height() / 2);
        var x = 0;
        var y = mid - height;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveMl: function(ss, sd) {

    },
    moveMc: function(ss, sd) {
        var height = Math.floor($(sd).height()/2);
        var width = Math.floor($(sd).width() / 2);
        var midy = Math.floor($(ss).height() / 2);
        var midx = Math.floor($(ss).width() / 2);
        var x = midx - width;
        var y = midy - height;
        $(sd).css({left: x + 'px', top: y + 'px'})
    },
    moveMr: function(selector) {

    },
};

var app_css = {
    getCss: function(selector) {
        var html = ["The clicked div has the following styles:"];
        var styleProps = $(this).css([
            "width", "height", "color", "background-color"
        ]);
        $.each(styleProps, function(prop, value) {
            html.push(prop + ": " + value);
        });

        $("#result").html(html.join("<br>"));
    },
    setCss: function(selector) {
    }
};
var arr_var = {
};

